<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        .c1 {
            color: red;
        }

        .bg1 {
            background-color: #f5e3cb;
        }

        .f1 {
            font-size: 26px;
        }
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root')) 
    const class1 = "c1"
    const class2 = "c1 bg1"
    const class3 = ['c1', 'bg1', 'f1']
    // 数组当作为内容渲染，是遍历挨个渲染。
    // 如果作为class的值渲染，中间有,
    root.render((
        <>
            <div className="c1">显示红色</div>
            <div className={class1}>显示红色2</div>
            <div className={class1} class="f1">既有class 又有 className</div>
            <div className={class2}>多个样式放在一个字符串中</div>
            <div className={class3.join(' ')}>多个样式的数组 {class3}</div>
        </>
    ))
    
</script>

</html>